<template>
  <div class="phoneBillRecharge">
    <c-title :hide="false" text="话费充值开卡"></c-title>
    <van-tabs v-model="active" title-active-color="#FE5E56" @change="tapChange">
      <van-tab title="开卡记录" name="0"></van-tab>
      <van-tab title="充值记录" name="1"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="lis" v-for="(item, index) in list" :key="index">
        <template v-if="active == 1">
          <div class="line">
            <div class="left">手机号</div>
            <div class="right">
              <div class="rightTxt">{{ item.open_phone }}</div>
              <div class="rightStatus" :class="[item.status != 2 ? 'suc' : '']">{{ item.status_name }}</div>
            </div>
          </div>
          <div class="line">
            <div class="left">充值金额</div>
            <div class="right">
              <div class="rightTxt">{{ item.trans_amount }}元</div>
            </div>
          </div>
          <div class="line">
            <div class="left">平台订单号</div>
            <div class="right">
              <div class="rightTxt">{{ item.recharge_no }}</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="line">
            <div class="left">姓名/手机号</div>
            <div class="right">
              <div class="rightTxt">{{ item.name }}（{{ item.mobile }}）</div>
            </div>
          </div>
          <div class="line">
            <div class="left">身份证号</div>
            <div class="right">
              <div class="rightTxt">{{ item.identity }}</div>
            </div>
          </div>
          <div class="line">
            <div class="left">开卡手机号</div>
            <div class="right">
              <div class="rightTxt">{{ item.open_phone }}</div>
            </div>
          </div>
          <div class="line">
            <div class="left">开卡交易流 程编号</div>
            <div class="right">
              <div class="rightTxt">{{ item.trans_no }}</div>
            </div>
          </div>
          <div class="line">
            <div class="left">详细地址</div>
            <div class="right">
              <div class="rightTxt">{{ item.address }}</div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      active: 0,
      list: [],
      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    console.log(this.$route.params.rid);
    if (this.$route.params.status == 2) {
      this.active = "1";
    }
    this.getData();
  },
  methods: {
    tapChange() {
      this.page = 1;
      this.total_page = 0;
      this.list = [];
      this.getData();
    },
    getData() {
      let urlStr = "";
      if (this.active == "0") {
        urlStr = "plugin.phone-bill-recharge.frontend.open-card.member-cards";
      } else {
        urlStr = "plugin.phone-bill-recharge.frontend.recharge.index";
      }
      let json = {};
      if (this.$route.params.status == 2 && this.active == 1) {
        if (this.$route.params.rid) {
          json.return_balance_id = this.$route.params.rid;
        }
        json.status = 2;
      }
      $http.get(urlStr, json, "加载中...").then(
        response => {
          if (response.result === 1) {
            this.isLoadMore = true;
            this.list = response.data.data;
            this.total_page = response.data.last_page;
            if (!this.total_page) {
              this.total_page = 0;
            }
          } else {
            this.$toast(response.msg);
          }
        },
        function (response) {
          console.log(response);
        }
      );
    },
    //获取更多数据
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let urlStr = "";
        if (this.active == 0) {
          urlStr = "plugin.phone-bill-recharge.frontend.open-card.member-cards";
        } else {
          urlStr = "plugin.phone-bill-recharge.frontend.recharge.index";
        }
        $http
          .get(
            urlStr,
            {
              page: this.page
            },
            "加载中"
          )
          .then(
            response => {
              this.isLoadMore = true;
              if (response.result === 1) {
                var myData = response.data.data;
                this.list = this.listData.concat(myData); //数组拼接
              } else {
                this.page = this.page - 1;
                this.isLoadMore = false;
                return;
              }
            },
            function (response) {
              // error callback
            }
          );
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.list {
  padding: 0.5rem 0.75rem;
  background: #fff;

  .lis {
    padding: 0.75rem;
    box-sizing: border-box;

    .line {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.85rem;

      .left {
        flex: 0.35;
        text-align: left;
        font-size: 0.88rem;
        color: #aaaab3;
        margin-right: 0.5rem;
      }

      .right {
        flex: 1;
        text-align: left;
        font-size: 0.88rem;
        display: flex;
        justify-content: space-between;

        .rightTxt {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }

        .rightStatus {
          font-size: 0.75rem;
          color: #aaaab3;
          margin-top: -0.28rem;
        }

        .suc {
          color: #fe5e56;
        }
      }
    }
  }
}

.dt {
  color: #fe5e56;
}
</style>
